<template>
  <!-- 头部 -->

  <div class="dept_where">
    <span>仓库编号：</span><el-input class="dept_input" v-model="dept_code" style="width: 240px" />
    <span>仓库名称：</span><el-input class="dept_input" v-model="leader" style="width: 240px" />
    <el-button type="primary" class="" @click="queryDept()">查询</el-button>
    <el-button @click="reset">重置</el-button>
    <el-button type="success" @click="addDept()">

      <span>新增</span>
    </el-button>

  </div>



  <el-table :data="tableData" :header-cell-style="{
      textAlign: 'center',
      background: '#f5f7fa',
      fontWeight: 'bold',
      position: 'sticky',
      top: 0
    }" :cell-style="{ textAlign: 'center', }" style="width: 100%" border>

    <el-table-column prop="warehouse_code" label="库位编码" show-overflow-tooltip>
      <template #default="scope">
        <span style="cursor: pointer; color: #409EFF;" @click="detail(scope.row)">
          {{ scope.row.warehouse_code }}
        </span>
      </template>
    </el-table-column>
    <el-table-column prop="warehouse_name" label="仓库名称" show-overflow-tooltip>
    </el-table-column>
    <el-table-column prop="warehouse_address" label="位置" show-overflow-tooltip>
    </el-table-column>
    <el-table-column prop="warehouse_capacity" label="仓库容量" show-overflow-tooltip>
    </el-table-column>
    <el-table-column prop="warehouse_manager" label="负责人" show-overflow-tooltip>
    </el-table-column>


    <el-table-column prop="warehouse_freeze" label="是否冻结" show-overflow-tooltip width="180%">
      <template #default="scope">
        <div class="switch-wrapper">
          <!-- 状态标签 -->
          <span class="status-label">
            {{ scope.row.warehouse_freeze === "1" ? '是（已冻结）' : '否（未冻结）' }}
          </span>

          <!-- 可点击的开关 -->
          <div class="switch-display" :class="{ 'switch-on': Number(scope.row.warehouse_freeze) === 1 }" role="switch"
            :aria-checked="scope.row.warehouse_freeze === '1'" @click="toggleFreeze(scope.row)" tabindex="0"
            aria-label="点击切换冻结状态">
            <span class="slider"></span>
          </div>
        </div>
      </template>
    </el-table-column>

    <el-table-column prop="remarks" label="备注" show-overflow-tooltip>
    </el-table-column>

    <el-table-column label="操作" width="280" show-overflow-tooltip>
      <template #default="scope">
        <div class="action-buttons">
          <el-button type="primary" size="small" @click="GoWarehouseareaInfo(scope.row.warehouse_code)">库区</el-button>
          <el-button size="small" @click="warehouseupdate(scope.row)">修改</el-button>
          <el-button type="danger" size="small" @click="warehouseDelete(scope.row)">删除</el-button>
        </div>
      </template>
    </el-table-column>

  </el-table>


  <!-- 分页 -->
  <div class="block">
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[5,10, 20, 30]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="pageCount">
    </el-pagination>
  </div>

  <!--右边侧边栏-->
  <el-drawer v-model="dialogVisible" :title="title" :direction="direction" :before-close="handleClose" size="30%"
    :show-close="false" @close="close">
    <div style="display: flex; justify-content: center; height: 100%;">

      <el-form name="configfilefirstkindForm" method="post" ref="ruleFormRef" :model="dept" :rules="rules"
        style="width: 80%; margin-top: 20px;">

        <el-form-item prop="warehouse_code" label="仓库编码" style="justify-content: center;">
          <div style="display: flex; align-items: center; gap: 10px;">
            <!-- 输入框禁用 -->
            <el-input v-model="dept.warehouse_code" placeholder="仓库编码" clearable style="width: 50%;"
              :disabled="dept.auto_generate_code === '1' || dept.isEditMode" />

            <!-- 开关禁用 -->
            <el-switch v-model="dept.auto_generate_code" :active-value="'1'" :inactive-value="'0'"
              @change="handleAutoGenerateCodeChange" active-color="#13ce66" inactive-color="#ff4949"
              :disabled="dept.isEditMode" />
            <span style="color: blue;"> 自动生成 </span>
          </div>

        </el-form-item>

        <el-form-item prop="warehouse_name" label="仓库名称" style="justify-content: center;">
          <el-input v-model="dept.warehouse_name" placeholder="仓库名称" clearable style="width: 100%;" />
        </el-form-item>

        <el-form-item prop="warehouse_manager" label="负责人　" style="justify-content: center;">
          <el-input v-model="dept.warehouse_manager" placeholder="负责人 " clearable style="width: 100%;" />
        </el-form-item>

        <el-form-item prop="warehouse_capacity" label="仓库容量" style="justify-content: center;">
          <el-input-number v-model="dept.warehouse_capacity" :min="0" />
        </el-form-item>

        <el-form-item prop="warehouse_address" label="位置　　" style="justify-content: center;">
          <el-input v-model="dept.warehouse_address" placeholder="位置" clearable style="width: 56%;" />
          <el-button type="primary" class="" @click="cx()" style="margin-left: 10px;">搜索</el-button>
        </el-form-item>

        <el-form-item label="备注　　" style="justify-content: center;">
          <el-input type="textarea" :rows="2" v-model="dept.remarks" placeholder="备注" clearable style="width: 100%;" />
        </el-form-item>

      </el-form>
    </div>

    <template #footer>
      <div class="dialog-footer" style="text-align: center;">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="deptAdd">确定</el-button>
      </div>
    </template>
  </el-drawer>

  <!--模态框-->
  <el-dialog title="查看仓库" width="30%" v-model="dialogVisibleSwer">


    <div style="display: flex; justify-content: center; height: 100%;">
      <el-form name="configfilefirstkindForm" method="post" ref="ruleFormRef" :model="dept" :disabled="true"
        style="width: 80%; margin-top: 20px;">

        <el-form-item prop="warehouse_code" label="仓库编码" style="justify-content: center;">

          <el-input v-model="dept.warehouse_code" placeholder="仓库编码" clearable style="width: 50%;" />
        </el-form-item>

        <el-form-item prop="warehouse_name" label="仓库名称" style="justify-content: center;">
          <el-input v-model="dept.warehouse_name" placeholder="仓库名称" clearable style="width: 50%;" />
        </el-form-item>

        <el-form-item prop="warehouse_manager" label="负责人　" style="justify-content: center;">
          <el-input v-model="dept.warehouse_manager" placeholder="负责人 " clearable style="width: 50%;" />
        </el-form-item>

        <el-form-item label="仓库容量" style="justify-content: center;">
          <el-input-number v-model="dept.warehouse_capacity" :min="0" />
        </el-form-item>

        <el-form-item label="位置　　" style="justify-content: center;">
          <el-input type="textarea" :rows="2" v-model="dept.warehouse_address" placeholder="位置" clearable
            style="width: 100%;" />

        </el-form-item>

        <el-form-item label="备注　　" style="justify-content: center;">
          <el-input type="textarea" :rows="2" v-model="dept.remarks" placeholder="备注" clearable style="width: 100%;" />
        </el-form-item>

      </el-form>



    </div>
    <span class="dialog-footer">
      <el-button @click="gbmtk">取消</el-button>
      <el-button type="primary" @click="confirmLoss">返回</el-button>
    </span>
  </el-dialog>

  <el-dialog title="在地图上选址" v-model="mapVisible" width="80%" top="8vh" >
    <!-- 顶部搜索 -->
    <div style="margin-bottom:12px">
      <el-input v-model="mapKeyword" placeholder="输入地址后点击搜索或在地图上点击" style="width:300px;margin-right:8px" />
      <el-button type="primary" @click="searchMapAddress">搜索</el-button>
    </div>

    <!-- 地图容器 -->
    <div id="MapContainer" style="width:100%;height:60vh"></div>

    <template #footer>
      <el-button @click="mapVisible = false">取消</el-button>
      <el-button type="primary" @click="confirmMapAddress">确定</el-button>
    </template>
  </el-dialog>
</template>

  <script setup>
  import AMapLoader from '@amap/amap-jsapi-loader'
  import { ref,onMounted,reactive,nextTick } from 'vue'
  import axios from 'axios';
  import { useRouter } from 'vue-router'
  import { useWarehouseStore } from '@/storejs/warehouseStore';
  import { ElMessage, ElMessageBox } from 'element-plus';
  import dayjs from 'dayjs'
  var dept_code=ref('');//仓库编码
  
  var leader=ref('');//仓库名称

  
  const tableData = ref([]);// 表格数据对象

  var warehouse_code=ref('')//仓库编码

  var warehouse_name=ref('')//仓库名称

  const currentPage = ref(1)//当前页

  const pageSize = ref(10)//每页显示数

  const pageCount = ref(0)//总记录数

  const dialogVisible = ref(false)//右边侧边栏显示

  const title = ref("添加仓库信息")
  
  var warehouse_pd=ref(0);

  const ruleFormRef = ref();


  //模态框的显示
  const dialogVisibleSwer = ref(false);


  //控制 Element Plus 的抽屉Drawer组件从哪个方向滑出。
  const direction = ref('rtl')

 let intWarehouseInfo={
  warehouse_code:"",
  warehouse_name:"",
  warehouse_manager:"",
  warehouse_capacity:0,
  warehouse_address:"",
  remarks:"",
  warehouse_freeze:'0',
  Create_by: localStorage.getItem('userLName'),
  Create_time: dayjs().format('YYYY-MM-DDTHH:mm:ss.SSSZ'),
  update_by:"",//修改人
  Update_time:null,
  Del_flag:'0',
  auto_generate_code:'0',//是否自动生成仓库编码
  isEditMode: false,//是否是编辑模式
 }
 //模态对象
 const dept =reactive({...intWarehouseInfo})


  const warehouseStore = useWarehouseStore()

  // 表单验证规则（示例）
const rules = reactive({
  warehouse_code: [
    { required: true, message: '仓库编码不能为空', trigger: 'blur' }
  ],
  warehouse_name: [
    { required: true, message: '仓库名称不能为空', trigger: 'blur' }
  ],
  warehouse_manager: [
    { required: true, message: '负责人不能为空', trigger: 'blur' }
  ],
  warehouse_capacity:[
    { required: true, message: '仓库容量不能为空', trigger: 'blur' }
  ],
  warehouse_address:[
    { required: true, message: '位置不能为空', trigger: 'blur' }
  ]
})


  // 原来 router.push 的那一行
  function cx() {
    openMapDialog()
  }


  //地图方法
  const mapVisible = ref(false)     // 控制弹窗
  const mapKeyword = ref('')        // 地图弹窗里的搜索关键字
  let mapInstance = null           // 高德地图实例
  let placeSearchIns = null           // 高德地点搜索实例
  let selectedAddr = ''             // 当前选中的地址
  let mapMarker = null // 用于保存当前标记
  // 打开地图弹窗
  function openMapDialog() {
    mapVisible.value = true
    nextTick(initMap)   // 等 dom 渲染完再初始化
  }

  function initMap() {
    if (mapInstance) return
    const container = document.getElementById('MapContainer')
    if (!container) return

    window._AMapSecurityConfig = {
      securityJsCode: '27ac62c83614fd39e47f64c024fe4b1d'
    }

    AMapLoader.load({
      key: 'deecd3033a3197d206b003f7e693aa01',
      version: '2.0',
      plugins: ['AMap.PlaceSearch', 'AMap.Geocoder']
    }).then(() => {
      mapInstance = new AMap.Map(container, { zoom: 11, center: [112.982279, 28.19409] })
      placeSearchIns = new AMap.PlaceSearch({ city: '长沙', radius: 5000 })

      /* 点击地图 → 添加标记并回填地址 */
      mapInstance.on('click', (e) => {
        const lnglat = [e.lnglat.lng, e.lnglat.lat]

        // 清除旧标记
        if (mapMarker) {
          mapInstance.remove(mapMarker)
        }

        // 添加新标记
        mapMarker = new AMap.Marker({
          position: new AMap.LngLat(...lnglat),
          map: mapInstance
        })

        // 设置地图中心
        mapInstance.setCenter(lnglat)

        // 获取地址并回填
        AMap.plugin('AMap.Geocoder', () => {
          new AMap.Geocoder().getAddress(lnglat, (status, result) => {
            if (status === 'complete') {
              selectedAddr = result.regeocode.formattedAddress
              mapKeyword.value = selectedAddr
            }
          })
        })
      })
    })
  }

  // 2. 手动搜索地址 → 地址回填输入框
  function searchMapAddress() {
    if (!mapKeyword.value.trim()) return ElMessage.warning('请输入地址')
    placeSearchIns.search(mapKeyword.value, (status, result) => {
      if (status === 'complete' && result.poiList?.pois.length) {
        const poi = result.poiList.pois[0]
        selectedAddr = poi.name + ' - ' + poi.address
        mapKeyword.value = selectedAddr           // ✅ 关键：实时回写
        mapInstance.setCenter([poi.location.lng, poi.location.lat])
        mapInstance.setZoom(15)
      } else {
        ElMessage.error('未找到该地址')
      }
    })
  }

  // 3. 确认选址 → 写入表单
  function confirmMapAddress() {
    if (!selectedAddr) return ElMessage.warning('请先选择地址')
    dept.warehouse_address = selectedAddr
    mapVisible.value = false
    mapKeyword.value = ''
  }





// 判断仓库编码是否存在
async function Warehouse_code_judgment() {
  try {
    const res = await axios.get("http://localhost:5181/api/Db_warehouse/WarehouseCodeJudgment", {
      params: { warehouse_code: dept.warehouse_code },
      headers: { Authorization: localStorage.getItem("token") }
    });

    if (res.data > 0) {
      ElMessage.error('仓库编码已存在');
     
      return false;
    }
    return true;

  } catch (err) {
    console.error('请求失败:', err);
    return false;
  }
}

// 判断仓库名称是否存在
async function Warehouse_name_judgment() {
  try {
    const res = await axios.get("http://localhost:5181/api/Db_warehouse/WarehouseNameJudgment", {
      params: { warehouse_name: dept.warehouse_name }, 
      headers: { Authorization: localStorage.getItem("token") }
    });

    if (res.data > 0) {
      ElMessage.error('仓库名称已存在');
      return false;
    }
    return true;

  } catch (err) {
    console.error('请求失败:', err);
    return false;
  }
}

  async function Warehouse_name_judgment_update() {
    try {
      const res = await axios.get("http://localhost:5181/api/Db_warehouse/WarehouseNameJudgment", {
        params: { warehouse_name: dept.warehouse_name },
        headers: { Authorization: localStorage.getItem("token") }
      });

      if (res.data > 1  ) {
        ElMessage.error('仓库名称已存在');
        return false;
      }
      return true;

    } catch (err) {
      console.error('请求失败:', err);
      return false;
    }
  }

//修改判断仓库名称是否存在
  async function Warehouse_name_Judgment_update() {
    try {
      const res = await axios.get("http://localhost:5181/api/Db_warehouse/Warehouse_name_UpdateJudgment", {
        params: {
          warehouse_name: dept.warehouse_name,
          warehouse_code: dept.warehouse_code
        },
        headers: {
          authorization: `Bearer ${localStorage.getItem('token')}`
        }
      });

      if (res.data > 0) {
        ElMessage.error('仓库名称已存在');
        return false;
      }
      return true;
    } catch (err) {
      console.error('请求失败:', err);
      return false;
    }
  }


//编码自动生成
function handleAutoGenerateCodeChange(value){
  if (value === '1') {
      // 开启自动生码
      axios.get("http://localhost:5181/api/DJBH/DJBH",{
        params:{
          en_code:3
        },headers:{ 
          'Authorization': 'Bearer ' + localStorage.getItem('token')
        }
      }).then((res)=>{
        dept.warehouse_code=res.data;
      // 手动触发验证
       ruleFormRef.value.validateField('warehouse_code', (valid) => {
      if (valid) {
        console.log('验证通过');
      } else {
        console.log('验证失败');
      }
    });
      }).catch((err)=>{
        console.log(err);
      })
    } else {
      // 关闭自动生码，清空编码
      dept.warehouse_code = '';
    }
}




//添加方法
async function deptAdd() {
  
 if(warehouse_pd==0){

  //添加
    ruleFormRef.value.validate(async (valid) => {
    if (valid) {

      const isCodeValid = Warehouse_code_judgment();   // 启动第一个检查
      const isNameValid = Warehouse_name_judgment();  // 启动第二个检查
      //这行代码的作用是 并发执行多个异步任务（Promise然后将它们的结果 解构赋值 给对应的变量。
      const [codeValid, nameValid] = await Promise.all([isCodeValid, isNameValid]);
    
      if (!codeValid || !nameValid) {
        console.log('仓库编码或名称重复，无法提交');
        return;
      }
     
      axios.put("http://localhost:5181/api/Db_warehouse/Db_warehouseAdd",dept,{
        headers:{
          Authorization:localStorage.getItem("token")
        }
      }).then((res)=>{
        
    
     
        if(res.data>0){
          ElMessage.success('添加成功');
          //关闭弹窗
          dialogVisible.value=false;
          //清空数据
          Object.assign(dept, intWarehouseInfo);
          //刷新数据
          Count();
          fill();
         
        }
      }).catch((er)=>{
        console.log(er)
      })
      

    } else {
      console.log('验证失败，请检查输入');
      return false;
    }
  });
 }else{ 
   const isNameValid = Warehouse_name_Judgment_update();  // 启动第二个检查

   const [nameValid] = await Promise.all([isNameValid]);
   if ( !nameValid) {
     console.log('仓库编码或名称重复，无法提交');
     return;
   }
  //修改
  axios.put("http://localhost:5181/api/Db_warehouse/Db_warehouseUpdate",dept,{
    headers:{
      Authorization:localStorage.getItem("token")
    }
  }).then((res)=>{
    if(res.data>0){
      ElMessage.success('修改成功');
      //关闭弹窗
      dialogVisible.value=false;
      //清空数据
      Object.assign(dept, intWarehouseInfo);
      //刷新数据
      fill();
      Count();
    }
  }).catch((err)=>{
    console.log(err)
  })
}
 
    
  
}

  //点击编码显示模态框,查看详细信息
  function detail(row) {
    dialogVisibleSwer.value = true;
    //修改数据--一键赋值
    Object.assign(dept , row)
  } 


  //模态取消
  function gbmtk() {
    dialogVisibleSwer.value = false;
    //清空数据
    Object.assign(
      dept , intWarehouseInfo)
  }

  function confirmLoss() {
    dialogVisibleSwer.value = false;
    //清空数据
    Object.assign(
      dept  , intWarehouseInfo)

  }


//仓库修改方法
function warehouseupdate(row){

  warehouse_pd=1;
  title.value = "修改仓库信息"; // 更新标题
  dialogVisible.value=ref(true);
 
 //不可以进行更改和点击自动生成按钮
  dept.isEditMode = true;



  Object.assign(dept, {
    warehouse_code: row.warehouse_code || '',
    warehouse_name: row.warehouse_name || '',
    warehouse_manager: row.warehouse_manager || '',
    warehouse_capacity: row.warehouse_capacity || 0,
    warehouse_address: row.warehouse_address || '',
    remarks: row.remarks || '',
    update_by: localStorage.getItem('userLName'),
    Update_time: dayjs().format('YYYY-MM-DDTHH:mm:ss.SSSZ')
  });
  //
  dept.auto_generate_code = '0';
}






// 关闭弹窗的方法
const close = () => {
  dialogVisible.value = false
}

//点击侧边栏显示
function addDept(){
  warehouse_pd=0;
  Object.assign(dept, intWarehouseInfo);
  dialogVisible.value=ref(true)
}



//点击查询按钮
function queryDept(){

  warehouse_code.value=dept_code.value;

  warehouse_name.value=leader.value;

  fill();
  Count();
}
//重置按钮
function reset() {
    dept_code.value = ""
    leader.value = ""
    warehouse_code.value=dept_code.value;
    warehouse_name.value=leader.value;
    fill()
    Count();
  }

//点击切换冻结状态
function toggleFreeze(row) {
if(row.warehouse_freeze==0){
  ElMessageBox.confirm(
    `你确定要冻结${row.warehouse_name}`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => { 
    axios.put("http://localhost:5181/api/Db_warehouse/WarehouseFrozenstate", {},
      {
        params: {
          id: row.warehouse_id,
          warehouse_freeze: row.warehouse_freeze
        },
        headers: {
          Authorization: localStorage.getItem("token")
        }
      }
    ).then((res => {
      ElMessage.success('冻结成功')
      fill()
    })
    ).catch((err) => {
      console.log(err)
    })
  }).catch(() => {
    console.log('取消')
  })
}else{
  ElMessageBox.confirm(
    `你确定要解冻${row.warehouse_name}`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    axios.put("http://localhost:5181/api/Db_warehouse/WarehouseFrozenstate", {},
      {
        params: {
          id: row.warehouse_id,
          warehouse_freeze: row.warehouse_freeze
        },
        headers: {
          Authorization: localStorage.getItem("token")
        }
      }
    ).then((res => {
      ElMessage.success('解冻成功')
      fill()
    })
    ).catch((err) => {
      console.log(err)
    })
  }).catch(() => {
    console.log('取消')
  }) 
}
}

  //插件路由器实例
  var router = useRouter();



//页面跳转
function GoWarehouseareaInfo(warehouse_code) {
  const warehouseStore = useWarehouseStore();
  warehouseStore.warehouseCode = warehouse_code;

  router.push('/main/DB/WarehouseareaInfo');
}

  // 每页数量变化--选择传递每页显示数
const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
  //重新按照pageSize和currentPage重新请求数据
  fill();
};

// 当前页变化
const handleCurrentChange = (newPage) => {
  currentPage.value=newPage;
  //重新按照pageSize和currentPage重新请求数据
  fill();
};


  //分页方法
  function fill(){
    axios.get("http://localhost:5181/api/Db_warehouse/WarehouseFY",{
      params:{
        warehouse_code:warehouse_code.value,
        warehouse_name:warehouse_name.value,
        currentPage:currentPage.value,
        pageSize:pageSize.value
      },
      headers:{
        Authorization:localStorage.getItem("token")
      }
    }).then((result) => {
      tableData.value=result.data;
     
    }).catch((err) => {
                console.info(err)
    })
  }

  //查询总数
  function Count(){
    axios.get("http://localhost:5181/api/Db_warehouse/warehouseCount",{
      params:{
        warehouse_code:warehouse_code.value,
        warehouse_name:warehouse_name.value,
      },
      headers:{
        Authorization:localStorage.getItem("token")
      }  
    }).then((result) => {
              pageCount.value=result.data
            
    }).catch((err) => {
                console.info(err)
    })
  }
  //逻辑删除
  function warehouseDelete(row) {
    ElMessageBox.confirm(
      `你确定要删除编号为 ${row.warehouse_code} 的仓库吗？`,
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.put(
          "http://localhost:5181/api/Db_warehouse/Warehousetombstone",
          {}, // put 请求如果没有 body 数据可以传空对象
          {
            params: {
              warehouse_code: row.warehouse_code
            },
            headers: {
              Authorization: localStorage.getItem("token")
            }
          }
        )
          .then((result) => {
            if (result.data > 0) {
              ElMessage.success(`仓库${row.warehouse_name}删除成功`)
              Count();
              fill();
            } else {
              ElMessage.success(`仓库已使用不可以删除`)
            }

          })
          .catch((err) => {
            console.error(err);
          });
      })
 
  } 

  onMounted(()=>{
    fill();
    Count();

  })
  
  </script>



  <style scoped>
  .block {
    display: flex;
    justify-content: center;

    margin-top: 20px;
  }

  .block {
    display: flex;
    justify-content: center;

    margin-top: 20px;
  }

  .action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    /* 按钮间距 */
  }

  /* 响应式调整 */
  @media (max-width: 1600px) {
    .action-buttons {
      gap: 4px;
    }

    .action-buttons .el-button {
      padding: 6px 8px;
      font-size: 12px;
    }
  }

  .el-button--primary {
    position: relative;

  }

  .button-group {
    display: flex;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .dept_title {
    float: left;
    font-weight: bold;
    margin-top: -10px;
    font-size: 20px;
  }

  .dept_where {
    display: left;
    margin-left: -400px;
    margin-top: -30px;
    margin-bottom: 20px;
  }

  .dept_where span {
    font-size: 16px;
    /* 可根据需要调整 */

  }

  


  .dept_input {
    margin-right: 20px;
  }

  .switch-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  .status-label {
    font-weight: 500;
    min-width: 90px;
    text-align: center;
    font-size: 13px;
    color: #333;
  }

  /* 开关容器 */
  .switch-display {
    position: relative;
    width: 50px;
    height: 24px;
    border-radius: 12px;
    background-color: #dcdfe6;
    /* 默认灰色背景 */
    cursor: pointer;
    user-select: none;
    transition: background-color 0.3s ease;
  }

  /* 开启状态样式 */
  .switch-display.switch-on {
    background-color: #409eff;
    /* 正常蓝色表示开启 */
  }

  /* 滑块样式 */
  .slider {
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: white;
    top: 1px;
    transition: left 0.3s ease;
  }

  /* 关闭状态滑块位置 */
  .switch-display .slider {
    left: 1px;
  }

  /* 开启状态滑块位置 */
  .switch-display.switch-on .slider {
    left: calc(100% - 23px);
    /* 让滑块移动到右边 */
  }



  .input-group {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
    width: fit-content;
    margin: 0 auto;
  }

  .input-group button {
    width: 36px;
    background-color: #f5f5f5;
    border: none;
    cursor: pointer;
    font-size: 18px;
  }

  .input-group button:disabled {
    background-color: #e0e0e0;
    cursor: not-allowed;
  }

  .input-group input {
    width: 60px;
    text-align: center;
    border: none;
    outline: none;
    padding: 4px 0;
  }

  .el-form-item__label::before {
    content: none !important;
    /* 隐藏星号 */
  }
</style>